<!-- 数据详情 -->

<template>
  <div class="statistics">
    <!-- <p class="chart-type">
          <img src="../../../../assets/images/home/icon_病害.png" alt=""> 病害分类统计
      </p> -->

    <div class="diy-header">
      <span class="title">分类统计</span>
      <span class="fTitle">Technical evaluation</span>
    </div>
    <div id="statistics1"></div>

    <!-- <p class="chart-type">
          <img src="../../../../assets/images/home/icon_病害.png" alt=""> 病害处理情况  Treatment
      </p> -->
    <div class="diy-header">
      <span class="title">处理情况</span>
      <span class="fTitle" style="left: 90px">Treatment</span>
    </div>
    <div style="margin-bottom: 20px" id="statistics2"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      dataList: [],
      isOk: '',
      noOk: '',
      pro: [],
      total: 0,
    }
  },
  components: {},
  mounted() {
    this.getHomeBh()
    this.getHomePro()
    //   this.drawPie1();
    //   this.drawPie2();
    //   window.addEventListener("resize", () => {
    //   this.CarPie.resize();
    // });
  },
  methods: {
    // 病害分类统计
    getHomePro() {
      this.$api.mearsuringPointSetting.getHomePro(1).then((res) => {
        console.log('病害分类统计', res.data.data)
        this.pro = res.data.data
        this.pro.map((item, key) => {
          this.total += Number(item.num)
        })
        this.drawPie1()
      })
    },
    // 病害处理情况
    getHomeBh() {
      this.$api.mearsuringPointSetting
        .getHomeBh({
          status: 0,
        })
        .then((res) => {
          console.log('病害wei处理情况', res.data.data)
          this.noOk = res.data.data

          this.$api.mearsuringPointSetting
            .getHomeBh({
              status: 2,
            })
            .then((res) => {
              console.log('病害yi处理情况', res.data.data)
              this.isOk = res.data.data

              this.drawPie2()
            })
        })
    },

    drawPie1() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById('statistics1'))
      var img =
        ''

      var trafficWay = this.pro

      var data = []
      let name = []
      var color = ['#327BDC', '#8A81F9', '#32D17E', '#FCAA5D', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        name.push(trafficWay[i].name)
        data.push(
          {
            value: trafficWay[i].num,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: 'transparent',
              },
            },
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          }
        )
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          center: ['50%', '43%'],
          clockWise: false,
          radius: [50, 55],

          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
                // position: 'outside',
                // color: '#ddd',
                // formatter: function(params) {
                //     var percent = 0;
                //     var total = 0;
                //     for (var i = 0; i < trafficWay.length; i++) {
                //         total += trafficWay[i].value;
                //     }
                //     percent = ((params.value / total) * 100).toFixed(0);
                //     if (params.name !== '') {
                //         return params.value + params.name;
                //     } else {
                //         return '';
                //     }
                // },
              },
              // labelLine: {
              //     length: 30,
              //     length2: 20,
              //     show: true,
              //     color: '#00ffff'
              // }
            },
          },
          data: data,
        },
      ]
      let option = {
        backgroundColor: 'transparent',
        color: color,
        legend: {
          orient: 'horizontal',
          bottom: 0,
          data: name,
          textStyle: {
            color: '##666666',
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: (data) => {
            let value = ''
            trafficWay.map((item, key) => {
              if (item.name == data) {
                value = item.num
              }
            })
            return data + '  ' + value
          },
        },
        // title: {
        //     text: this.total,
        //     top: '35%',
        //     textAlign: "center",
        //     left: "47%",
        //     textStyle: {
        //         color: '#4B557C',
        //         fontSize: 16,
        //         fontWeight: '600'
        //     }
        // },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 80,
                height: 80,
              },
              // center: ["30%", "50%"],
              left: '35.5%',
              top: '23%',
              // position: [100, 100]
            },
          ],
        },
        tooltip: {
          show: true,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      }

      // 绘制图表
      this.CarPie.setOption(option)
    },

    drawPie2() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById('statistics2'))
      let bgColor = 'rgba(2, 120, 200, 0)'
      let title = '总量'
      let color = ['#8A81F9', '#FCAA5D']
      let echartData = [
        {
          name: '已处理',
          value: this.isOk,
        },
        {
          name: '未处理',
          value: this.noOk,
        },
      ]

      let option = {
        backgroundColor: 'rgba(2, 120, 200, 0)',
        color: color,
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          data: ['已处理', '未处理'],
          textStyle: {
            color: '##666666',
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: (data) => {
            return data + '  '
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 3,
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      }

      // 绘制图表
      this.CarPie.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
#statistics1 {
  width: 270px;
  height: 200px;
}
#statistics2 {
  width: 270px;
  height: 200px;
}
.total {
  display: flex;
  justify-content: start;
  margin-top: 20px;
  p {
    color: #666666;
  }
  img {
    position: relative;
    top: -5px;
  }
  .num {
    color: #327bdc;
  }
}
.chart-type {
  margin-top: 20px;
  color: #6c6f82;
  font-size: 16px;
  img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
}

.diy-header {
  background: url('../../../../assets//images/homeMap/线.png') no-repeat center;
  background-size: 95% 100%;
  width: 100%;
  height: 16px;
  margin-top: 25px;
  background-position-x: 50%;
  .title {
    font-size: 13px;
    font-weight: bold;
    color: #c6e5f6;
    position: relative;
    left: 15px;
    top: -5px;
  }
  .fTitle {
    font-weight: 400;
    color: #c6e5f6;
    display: inline-block;
    transform: scale(0.7);
    position: relative;
    left: 80px;
  }
}
</style>
